import React, { Component } from 'react'
import { connect } from 'react-redux'
import SimplePageComponent from '../../components/SimplePageComponent'
import { saveComment } from './actions';

class CommentEditor extends Component {

  // constructor() {
  //   super(...arguments)
  //   this.handleSubmit = this.handleSubmit.bind(this) 
  // }

  // ES6 functions provides correct Context by default, so no need for constructor
  handleSubmit = (event) => {

    event.preventDefault();
    const commentContent = this.refs.commentContent;
    const commentContentValue = commentContent.value;
    const { post_id } = this.props;
    console.log("commentContentValue: " + commentContentValue);
    this.props.dispatch( saveComment( {post_id,commentContentValue} ) );

  }

  render() {

    // Get from Parent Component (GamePostDisplay)
    const { post_id } = this.props;

    return (
      <div>

        <br/>
        <form>
          Please comment:
          <br/>
          <input type="text" ref="commentContent" placeholder="Please comment" className="form-control"/>
          <button className="btn btn-success" onClick={this.handleSubmit}>Save Comment</button>
        </form>

      </div>
      
    )
  }
}

function mapStateToProps(state, ownProps) {
  return {}
}

function mapDispatchToProps(dispatch) {
  return {
    //handleAddComment: (e) => {
    //  e.preventDefault();dispatch( saveComment(this.props.post_id) )},
    dispatch,
  };
}

module.exports = connect(mapStateToProps, mapDispatchToProps)(CommentEditor)